import WebPlayer from '../components/WebPlayer'
import example from '../examples/gestures'


In React Native, gestures are created using the `PanResponder` API.

## **`PanResponder`**

Most built-in React Native components (`View`, `Text`, etc) can become a responder and handle touch events. You'll need to create a set of `panHandlers` and pass them into your component as props. Call `{'panResponder = PanResponder.create(panHandlers)'}` with an object containing handlers to create a `PanResponder`. You can then access `panResponder.panHandlers`, which will be an enhanced version of the handlers object you passed in.

## **`PanHandlers`**

You will likely want to handle `onStartShouldSetPanResponder` or `onMoveShouldSetPanResponder` to become a response and handle the gesture. Beyond that, you'll likely want to handle the `Grant`, `Move`, `Release`, and `Terminate` to update your UI in response to the gesture. Unless you have many complex gestures in your app, you generally won't need to include every handler to get a working gesture.

Here's the list of _all_ handlers:

- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
- `onPanResponderReject: (e, gestureState) => {...}`
- `onPanResponderGrant: (e, gestureState) => {...}`
- `onPanResponderStart: (e, gestureState) => {...}`
- `onPanResponderEnd: (e, gestureState) => {...}`
- `onPanResponderRelease: (e, gestureState) => {...}`
- `onPanResponderMove: (e, gestureState) => {...}`
- `onPanResponderTerminate: (e, gestureState) => {...}`
- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
- `onShouldBlockNativeResponder: (e, gestureState) => {...}`

More details are available on each of these in the [docs](https://facebook.github.io/react-native/docs/panresponder.html).

# Example

<WebPlayer {...example} />

# Responder Control Flow

The following diagram illustrates how a component can acquire responder status.

<figure>
  <img style={{ paddingTop: 40, width: 550 }} src={'pan-responder-flow.png'} />
  <figcaption style={{ paddingBottom: 40 }}>
    Figure 4-3, Obtaining touch responder status, from{' '}
    <em>
      <a href={'http://shop.oreilly.com/product/0636920041511.do'}>
        Learning React Native
      </a>
      , First Edition, p. 56
    </em>
  </figcaption>
</figure>
